<template>
  <div class="searchTop">
    <svg class="icon" aria-hidden="true" @click="$router.go(-1)">
        <use xlink:href="#icon-zuojiantou"></use>
      </svg>
      <input type="text" placeholder="陈奕迅" v-model="keyWord" @keydown.enter="enterKey()">
  </div>
  <div class="searchHistory">
    <span class="history">历史</span>
    <span v-for="item in keyWordList" :key="item" class="keySpan" @click="searchHistory(item)">
        {{item}}
    </span>
    <svg class="icon" aria-hidden="true" @click="delHistory()">
        <use xlink:href="#icon-shanchu"></use>
      </svg>
  </div>
  <div class="itemList">
      <div class="item" v-for="(item, i) in searchList" :key="i">
        <div class="itemLeft" @click="updateIndex(item)">
          <span class="leftSpan">{{ i + 1 }}</span>
          <div>
            <p>{{ item.name }}</p>
            <span v-for="(item1, index) in item.artists" :key="index">{{item1.name}}</span>
          </div>
        </div>
        <div class="itemRight">
          <svg class="icon bofang" aria-hidden="true" v-if='item.mvid !=0'>
            <use xlink:href="#icon-shipin"></use>
          </svg>
          <svg class="icon liebiao" aria-hidden="true">
            <use xlink:href="#icon-31liebiao"></use>
          </svg>
        </div>
      </div>
    </div>
</template>

<script>
import {getSearchMusic} from '@/request/api/home'
import { mapMutations, mapState } from 'vuex'
export default {
    data() {
        return {
            keyWordList:[], // 历史记录列表
            keyWord:'', // 当前搜索的记录
            searchList: [], // 当前搜索歌曲记录
        }
    },
    mounted() {
        // 在页面加载时候去localStorage取值,并判断其中是否有值
        if (JSON.parse(localStorage.getItem('keyWordList'))) {
            this.keyWordList = JSON.parse(localStorage.getItem('keyWordList'))
        }else {
            this.keyWordList = []
        }
    },
    computed:{
        ...mapState(['playList'])
    },
    methods:{
        // 回车按下则搜索
        async enterKey(){
            if (this.keyWord != "") {
                // 将当前记录推入数组
                this.keyWordList.unshift(this.keyWord)
                // 使用set对数组去重
                this.keyWordList = [...new Set(this.keyWordList)]
                // 对数组长度限制
                if(this.keyWordList.length > 7){
                    this.keyWordList.splice(this.keyWordList.length - 1,1)
                }
                // 将历史记录列表保存到localStorage
                localStorage.setItem('keyWordList',JSON.stringify(this.keyWordList))
                // 发出搜索请求
                let res = await getSearchMusic(this.keyWord)
                this.searchList = res.data.result.songs
                // console.log(res);
                // 每次搜索清空输入框
                this.keyWord = ""
            }
        },
        // 删除历史记录
        delHistory(){
            localStorage.removeItem('keyWordList')
            this.keyWordList = []
        },
        // 搜索历史记录
        async searchHistory(item){
            // 发出搜索请求
            let res = await getSearchMusic(item)
            console.log(res.data.result.songs);
            this.searchList = res.data.result.songs
        },
        // 将当前歌曲更新至vuex中的播放列表
        updateIndex(item){
            item.al = item.album
            item.al.picUrl = item.album.artist.img1v1Url
            this.pushPlayList(item)
            this.updatePlayListIndex(this.playList.length - 1)
        },
        ...mapMutations(['pushPlayList','updatePlayListIndex'])
    }
}
</script>


<style lang="less" scoped>
    .searchTop{
        width: 100%;
        height: 1rem;
        padding: 0 .2rem;
        display: flex;
        align-items: center;
        input {
            margin-left: .2rem;
            border: none;
            border-bottom: 1px solid #999;
            width: 85%;
            padding: .1rem;
        }
    }

    .searchHistory {
        width: 100%;
        padding: .2rem;
        position: relative;
        .history{
            font-weight: 700;
        }
        .keySpan {
            display: inline-block;
            padding: .1rem .2rem;
            background-color: rgb(202, 191, 191);
            border-radius: 20px;
            margin: .1rem .2rem;

        }
        .icon {
            width: .3rem;
            height: .3rem;
            position: absolute;
            right: .2rem;
        }
    }

    .itemList {
    width: 100%;
    padding: .2rem;
    .item {
      width: 100%;
      height: 1.4rem;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .itemLeft {
        width: 85%;
        height: 100%;
        display: flex;
        align-items: center;
        .leftSpan {
          display: inline-block;
          width: 0.2rem;
          text-align: center;
        }
        div {
          p {
            width: 4.54rem;
            height: .4rem;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            font-weight: 700;
          }
          span{
            font-weight: 400;
            font-size: .24rem;
            color: #999;
          }
          margin-left: 0.3rem;
        }
      }
      .itemRight{
        width: 20%;
        height: 100%;
        display: flex;
        // justify-content: space-between;
        align-items: center;
        position: relative;
        .icon{
          fill: #999;
        }
         .bofang{
            position: absolute;
            left: 0;
          }
         .liebiao{
            position: absolute;
            right: 0;
          }
      }
    }
  }
</style>